<template>
    <div>
        <form data-test="form" @submit.prevent="createTodo">
            <input data-test="new-todo" v-model="newTodo" />
        </form>

        <div v-for="todo in todos" :key="todo.id" data-test="todo" :class="[todo.completed ? 'completed' : '']">
            <input type="text" v-model="todo.text" data-test="todo-input"
                @change="editTodo(todo.id, ($event.target as HTMLInputElement).value)" />
            <input type="checkbox" v-model="todo.completed" data-test="todo-checkbox" />
            <button @click="deleteTodo(todo.id)" data-test="delete-button">Delete</button>
        </div>
    </div>
</template>

<script lang="ts">
import { useAuthStore } from '../stores/auth';

export default {
    name: 'TodoApp',

    data() {
        return {
            newTodo: '',
            todos: [
                {
                    id: 1,
                    text: '1',
                    completed: false
                }
            ]
        };
    },

    methods: {
        createTodo() {
            const authStore = useAuthStore()
            if (!authStore.user) {
                alert('请先登录')
                return
            }
            this.todos.push({
                id: this.todos.length + 1,
                text: this.newTodo,
                completed: false
            });
            this.newTodo = '';
        },
        deleteTodo(todoId: number) {
            const authStore = useAuthStore()
            if (!authStore.user) {
                alert('请先登录')
                return
            }
            const index = this.todos.findIndex(todo => todo.id === todoId);
            if (index !== -1) {
                this.todos.splice(index, 1);
            }
        },
        editTodo(todoId: number, newText: string) {
            const authStore = useAuthStore()
            if (!authStore.user) {
                alert('请先登录')
                return
            }
            const index = this.todos.findIndex(todo => todo.id === todoId);
            if (index !== -1) {
                this.todos[index].text = newText;
            }
        }
    }
};
</script>

<style>
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

form {
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="checkbox"] {
    margin-right: 10px;
}

.todo {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

.todo.completed {
    background-color: #f0f0f0;
    text-decoration: line-through;
}

button {
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
</style>
